import * as echarts from 'echarts'
import { onMounted, watch, computed, watchEffect } from 'vue'
import {chartResize} from '@/views/dataBoard/compNew/ut';

const colors = ['#4394e4', "#2A60A7"];
const getS = (data) => {
  const length = data.length
  const s1 = {
    data: [],
    type: 'bar',
    itemStyle: {
      color: colors[0],
    },
    barMaxWidth: 40,
  }
  const s2 = {
    data: [],
    type: 'bar',
    itemStyle: {
      color: colors[1],
    },
    barMaxWidth: 40,
    yAxisIndex: 1,
  }
  for (let i = 0; i < length; i++) {
    if (i < 2) {
      s1.data.push(data[i])
      s2.data.push(0)
    } else {
      s1.data.push(0)
      s2.data.push(data[i])
    }
  }
  return [s1, s2]
}
const Comp = (props: any) => {
  const { id, data, key, showUnit = true } = props
  watchEffect(
    () => {
      const myChart = echarts.init(document.getElementById(id) as any)
      const _data = data[key]
      if (_data) {
        const option = {
          color: ['#4394e4'],
          grid: {
            left: 50,
            top: 30,
            bottom: 40,
            right: 50,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
          },
          xAxis: {
            type: 'category',
            axisLabel: {
             color: colors[1],
              interval: 0,
              rotate: 30,
              fontSize: 10,
            },

            data: _data.xaxisList,
          },
          yAxis: [{
            type: 'value',
            // name: showUnit ? '单位：吨' :"",
            position: 'left',
            axisLabel: {
              color: colors[0],
              interval: 2,
            },
            splitNumber: 3,
            nameTextStyle: {
              color: colors[2],
            },
            axisTick: {
              show: true,
              color: colors[0],
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: colors[0],
                interval: 2,
              },
              splitNumber: 3,
              nameTextStyle: {
                color: 'rgba(255, 255, 255, 1)',
              },
              axisTick: {
                show: true,
                color: colors[0],
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: colors[0],
                  type: [5, 10],
                  dashOffset: 5,
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[0],
                },
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            }
          }, {
            type: 'value',
            name: showUnit ? '单位：吨' :"",
            position: 'right',
            axisLabel: {
              color: colors[1],
              interval: 2,
            },
            splitNumber: 3,
            nameTextStyle: {
              color: colors[2],
            },
            axisTick: {
              show: true,
              color: colors[1],
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: colors[1],
                interval: 2,
              },
              splitNumber: 3,
              nameTextStyle: {
                color: 'rgba(255, 255, 255, 1)',
              },
              axisTick: {
                show: true,
                color: colors[1],
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: colors[1],
                  type: [5, 10],
                  dashOffset: 5,
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: colors[1],
                },
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1]
              }
            }
        }],
          series: getS(_data.yaxisList[0].data),
        }
        myChart.setOption(option)
      }
      chartResize(myChart);
    },
    {
      flush: 'post',
    },
  )
}

export default Comp
